<template>
  <div class="menu-container">
    <template v-for="v in menuList">
      <el-submenu
        :index="v.name"
        v-if="v.children && v.children.length > 0"
        :key="v.name"
      >
        <template slot="title">
          <i :class="v.meta.icon" style="marign-right: 10px"></i>
          <span>{{ v.meta.name }}</span>
        </template>
        <my-nav :menuList="v.children"></my-nav>
      </el-submenu>
      <el-menu-item
        :key="v.name"
        :index="v.name"
        @click="gotoRoute(v.name)"
        v-else
      >
        <i class="iconfont" :class="v.meta.icon"></i>
        <span slot="title">{{ v.meta.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
import store from "@/store";
export default {
  name: "my-nav",
  props: {
    menuList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    gotoRoute(name) {
      store.commit("permission/SET_CURRENT", name);
      sessionStorage.setItem(
        "currentIndex",
        store.state.permission["currentMenu"]
      );
      this.$router.push({ name }); // push(path)  push({name:''})
    },
  },
};
</script>

<style>
/* 侧边栏箭头 */
.menu-container .el-icon-arrow-down:before {
  color: rgb(106, 165, 243) !important;
}
/* 图标 */
.el-menu-item i,
.el-submenu i {
  font-size: 18px !important;
  margin-right: 15px !important;
}
.el-submenu [class^="el-icon-"] {
  width: 18px !important;
  text-align: inherit !important;
}
</style>